<template>
  <div>
    <van-notice-bar class="notice" left-icon="volume-o" :scrollable="false">
      <van-swipe
        vertical
        class="notice-swipe"
        :autoplay="3000"
        :show-indicators="false"
      >
        <van-swipe-item
          class="notice-swipe-item"
          v-for="item in mockData"
          :key="item.id"
          >{{ item.name }} 成功下款{{ item.quota }}元</van-swipe-item
        >
      </van-swipe>
    </van-notice-bar>
    <div
      class="tx-img"
      @click="vipOpen"
      v-if="userInfo && userInfo.is_vip != 1"
    >
      <img src="@/assets/images/ic_home_pic.png" alt="" />
    </div>
    <div class="loan-box">
      <h2 class="loan-title">为你推荐以下贷款渠道</h2>
      <ul class="loan-list">
        <li
          class="loan-item"
          @click="target(item)"
          v-for="item in productData"
          :key="item.id"
        >
          <div class="loan-item-header">
            <div>
              <img :src="`${$img}${item.logo}`" alt="" />
              <h3>{{ item.name }}</h3>
              <p>
                <span>{{ item.features.split('|')[0] }}</span
                ><span>{{ item.features.split('|')[1] }}</span>
              </p>
            </div>
            <p>{{ item.count }}人申请</p>
          </div>
          <div class="loan-item-cont">
            <div class="loan-item-cont-left">
              <h3 class="price">{{ item.rmb }}-200000</h3>
              <p class="time">
                贷款期限{{ item.deadline + item.util }} | {{ item.description }}
              </p>
              <!-- <p class="desc">下款快</p> -->
            </div>
            <van-button
              class="loan-btn"
              round
              block
              type="info"
              native-type="submit"
              color="linear-gradient(to right, #ebb15b, #f6c775)"
            >
              去申请
            </van-button>
          </div>
        </li>
      </ul>
      <p class="loan-desc-title">合理使用信用，避免产生逾期</p>
      <!--   <ul class="loan-service">
        <li><i></i>客服电话：0000000</li>
        <li><i></i>工作时间：9:00~18:30</li>
      </ul> -->
    </div>
    <van-popup
      class="open-vip"
      close-icon="close"
      round
      closeable
      v-model="show"
    >
      <div class="open-vip-main">
        <img src="@/assets/images/ic_vip.png" alt="" />
        <div class="open-vip-desc">
          <h2>开通会员</h2>
          <p>解锁会员专享下款产品</p>
          <p>下款更快 额度更高</p>
        </div>
        <van-button
          class="open-vip-btn"
          round
          block
          type="info"
          @click="vipOpen"
          color="linear-gradient(to right, #ebb15b, #f6c775)"
        >
          去开通
        </van-button>
        <h3 @click="show = false">再想一想</h3>
      </div>
    </van-popup>
    <van-popup
      class="open-vip-ing"
      close-icon="close"
      round
      closeable
      v-model="vipIng"
    >
      <div class="open-vip-ing-main" @click="vipOpen">
        <h2>开通会员，领取您的专属额度</h2>
        <p>会员折扣活动最后6小时，抢购中...</p>
      </div></van-popup
    >
  </div>
</template>

<script>
import { index, productUv } from '@/api/index'
import { getStore } from '@/utils/group'
import { mapState } from 'vuex'
export default {
  name: 'Index',
  data() {
    return {
      active: 0,
      show: false,
      vipIng: false,
      mockData: [],
      productData: []
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo
    })
    /*  swiper() {
      return this.$refs.mySwiper.$swiper
    } */
  },
  components: {
    /*  Swiper,
    SwiperSlide */
  },
  activated() {
    if (this.userInfo && this.userInfo.is_vip != 1) {
      this.vipIng = true
    }
  },
  async mounted() {
    const { mockData, productData } = await index()
    this.mockData = mockData
    this.productData = productData
  },
  methods: {
    vipOpen() {
      const { realse_name, is_bind_bank_card } = this.userInfo
      if (realse_name == '未实名' && !getStore('userRest')) {
        this.$router.push({
          path: '/process'
        })
        return
      }
      if (is_bind_bank_card == 0) {
        this.$router.push({
          path: '/process/bank'
        })
        return
      }
      this.$router.push({
        path: '/vip'
      })
    },
    async target({ is_vip, url, id }) {
      if (is_vip == 1 && this.userInfo.is_vip != 1) {
        this.show = true
        return
      }
      await productUv(id)
      window.location.href = url
    },
    goTask(index) {
      this.$router.push({
        path: '/task',
        query: {
          active: index
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.open-vip-ing {
  height: 52vh;
  background: url('../../assets/images/com_view_member_dialog.png') no-repeat;
  background-size: 100% 100%;
  .open-vip-ing-main {
    width: 330px;
    margin: 0 auto;
    margin-top: 30vh;
    text-align: center;
    color: #333;
    overflow: hidden;
    padding-bottom: 60px;
    h2 {
      font-size: 20px;
      font-weight: bold;
      margin-top: 20px;
    }
    p {
      margin-top: 14px;
      font-weight: bold;
      font-size: 16px;
    }
  }
}
.open-vip {
  .open-vip-main {
    width: 330px;
    margin: 0 auto;
    height: 320px;
    img {
      display: block;
      width: 150px;
      margin: 0 auto;
      margin-top: 20px;
    }
    .open-vip-desc {
      text-align: center;
      h2 {
        font-size: 24px;
        color: #333333;
        font-weight: bold;
        margin: 15px 0;
      }
      p {
        color: #333;
        font-size: 20px;
        margin-bottom: 10px;
      }
    }
    .open-vip-btn {
      width: 300px;
      margin: 20px auto;
    }
    h3 {
      color: #e9b979;
      font-size: 14px;
      text-align: center;
    }
  }
}
.notice {
  height: 26px;
  background: #a3a3a3;
  color: #fff;
  .notice-swipe {
    height: 26px;
    line-height: 26px;
    .notice-swipe-item {
      font-size: 12px;
    }
  }
}

.tx-img {
  width: 100%;
  height: 460px;
  img {
    width: 100%;
    height: 100%;
  }
}
.loan-box {
  background: #f5f5f5;
  padding: 40px 20px 80px 20px;
  .loan-title {
    color: #4a4a4a;
    font-size: 20px;
    font-weight: bold;
    position: relative;
    padding-left: 12px;
    margin-bottom: 20px;
    &::before {
      position: absolute;
      top: 50%;
      left: 0;
      transform: translate(0, -50%);
      display: inline-block;
      content: '';
      width: 4px;
      background: #e7aa53;
      height: 20px;
    }
  }
  .loan-list {
    li {
      padding: 15px 20px;
      border-radius: 10px;
      background: #fff;
      margin-bottom: 20px;
      .loan-item-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 10px;
        border-bottom: 1px solid #ccc;
        margin-bottom:10px;
        div {
          align-items: center;
          display: flex;
          justify-content: flex-start;
          h3 {
            font-size: 18px;
            font-weight: bold;
            color: #545454;
            margin: 0 5px 0 10px;
          }
          img {
            width: 25px;
            height: 25px;
          }
          p {
            span {
              font-size: 12px;
              display: inline-block;
              padding: 4px 4px;
              &:nth-of-type(1) {
                border-radius: 0 0 0 6px;
                background: #e9ae57;
                color: #3f3d3a;
              }
              &:nth-of-type(2) {
                border-radius: 0 6px 0 0;
                background: #393939;
                color: #dca452;
              }
            }
          }
        }
        & > p {
          font-size: 12px;
          color: #fa2246;
        }
      }
      .loan-item-cont {
        display: flex;
        justify-content: space-between;
        h3 {
          color: #e7aa53;
          font-size: 24px;
          font-weight: bold;
          margin-bottom: 10px;
        }
        .time {
          font-size: 14px;
          color: #434343;
          margin-bottom: 10px;
        }
        .desc {
          font-size: 12px;
          color: #434343;
        }
        .loan-btn {
          width: 76px;
          height: 26px;
          span {
            font-size: 12px;
          }
        }
      }
    }
  }
  .loan-desc-title {
    text-align: center;
    color: #9d9d9d;
    font-size: 14px;
  }
  .loan-service {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    li {
      font-size: 14px;
      display: flex;
      align-items: center;
      i {
        display: inline-block;
        width: 16px;
        height: 16px;
        margin-right: 5px;
      }
      &:nth-of-type(1) {
        i {
          background: url('../../assets/images/ic_iphone.png') no-repeat;
          background-size: 100% 100%;
        }
      }
      &:nth-of-type(2) {
        i {
          background: url('../../assets/images/ic_time.png') no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }
}
</style>
